<template>
  <div class="event-detail-page page">
    <nav-bar title="事件详情"></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-sticky class="page-scroll" :offset-top="44">
        <div class="event-detail-tip" v-if="eventData.isTimeOut === '2'">
          <van-icon name="warning-o" />
          即将超时
        </div>
        <van-cell
          title="事件名称"
          :value="eventData.eventName"
          title-class="van-cell__title_gray"
          value-class="van-cell__value_black"
        />
        <van-cell
          title="事件类型"
          :value="eventData.eventTypeName"
          title-class="van-cell__title_gray"
          value-class="van-cell__value_black"
        />
        <van-cell
          title="事件规模"
          :value="eventData.eventScaleName"
          title-class="van-cell__title_gray"
          value-class="van-cell__value_black"
        />
        <van-cell
          v-if="eventData.reason"
          title="退回原因"
          :value="eventData.reason"
          title-class="van-cell__title_gray"
          value-class="van-cell__value_black"
        />
        <van-cell
          title="事件点位"
          :value="eventData.eventLocation"
          title-class="van-cell__title_gray"
          value-class="van-cell__value_black"
        />
        <van-cell title="事件描述" title-class="van-cell__title_gray" :border="false" />
        <van-field
          readonly
          v-model="eventData.eventDescription"
          rows="5"
          autosize
          type="textarea"
          placeholder="请对您要上报的内容进行具体描述……"
          :border="false"
          class="van-field__value--textarea-lightgray"
        />
        <template v-if="eventData.overTime">
          <van-cell
            title="要求时限"
            :value="eventData.overTime"
            title-class="van-cell__title_gray"
            value-class="van-cell__value_black"
          />
        </template>
        <template v-if="fileList.length">
          <van-cell title="添加图片/视频" title-class="van-cell__title_gray" :border="false" />
          <van-field class="van-field__value--upload">
            <template #input>
              <van-uploader
                name="fileList"
                v-model="fileList"
                :show-upload="false"
                :deletable="false"
                @click-preview="previewClick"
              >
                <template #preview-cover="file">
                  <template v-if="format.includes(file.url.split('.')[file.url.split('.').length - 1])">
                    <div class="van-uploader__preview-masker"></div>
                    <video-player
                      class="video-player vjs-custom-skin"
                      :playsinline="true"
                      :options="{
                        aspectRatio: '16:16',
                        preload: 'auto',
                        sources: [
                          {
                            src: file.url
                          }
                        ]
                      }"
                    ></video-player>
                  </template>
                </template>
              </van-uploader>
            </template>
          </van-field>
        </template>
        <van-cell
          title="处置状态"
          :value="eventData.eventStatusName"
          title-class="van-cell__title_gray"
          value-class="van-cell__value_black"
        />
        <van-cell
          title="上报来源"
          :value="eventData.eventOriginName"
          title-class="van-cell__title_gray"
          value-class="van-cell__value_black"
        />
        <van-cell
          title="上报时间"
          :value="eventData.reportTime"
          title-class="van-cell__title_gray"
          value-class="van-cell__value_black"
        />
        <van-cell
          title="上报人"
          :value="eventData.reportPerson"
          title-class="van-cell__title_gray"
          value-class="van-cell__value_black"
        />
        <!-- 上次处置结果 -->
        <template v-if="resultData.lastTime && Object.keys(resultData.lastTime).length">
          <van-collapse v-model="resultActiveNames" :border="false" class="van-cell__border_top">
            <van-collapse-item size="large" title="上次处置结果" name="1">
              <van-cell title="处置结果" :value="resultData.lastTime.taskName" :border="false" />
              <van-field
                readonly
                v-model="resultData.lastTime.comment[1].visitRecord"
                rows="5"
                autosize
                type="textarea"
                :border="false"
                class="van-field__value--textarea-lightgray"
              />
              <template v-if="resultData.lastTime.fileList && resultData.lastTime.fileList.length">
                <van-cell title="图片/视频" title-class="van-cell__title_gray" :border="false" />
                <van-field class="van-field__value--upload" :border="false">
                  <template #input>
                    <van-uploader
                      v-model="resultData.lastTime.fileList"
                      :show-upload="false"
                      :deletable="false"
                      @click-preview="resultLastPreviewClick"
                    >
                      <template #preview-cover="file">
                        <template v-if="format.includes(file.url.split('.')[file.url.split('.').length - 1])">
                          <div class="van-uploader__preview-masker"></div>
                          <video-player
                            class="video-player vjs-custom-skin"
                            :playsinline="true"
                            :options="{
                              aspectRatio: '16:16',
                              preload: 'auto',
                              sources: [
                                {
                                  src: file.url
                                }
                              ]
                            }"
                          ></video-player>
                        </template>
                      </template>
                    </van-uploader>
                  </template>
                </van-field>
              </template>
            </van-collapse-item>
          </van-collapse>
        </template>
        <!-- 本次处置结果 -->
        <template v-if="resultData.thisTime && Object.keys(resultData.thisTime).length">
          <van-cell
            title="处置结果"
            :value="resultData.thisTime.taskName"
            class="van-cell__border_top"
            :border="false"
          />
          <van-field
            readonly
            v-model="resultData.thisTime.comment[1].visitRecord"
            rows="5"
            autosize
            type="textarea"
            :border="false"
            class="van-field__value--textarea-lightgray"
          />
          <template v-if="resultData.thisTime.fileList && resultData.thisTime.fileList.length">
            <van-cell title="图片/视频" :border="false" />
            <van-field class="van-field__value--upload" :border="false">
              <template #input>
                <van-uploader
                  v-model="resultData.thisTime.fileList"
                  :show-upload="false"
                  :deletable="false"
                  @click-preview="resultPreviewClick"
                >
                  <template #preview-cover="file">
                    <template v-if="format.includes(file.url.split('.')[file.url.split('.').length - 1])">
                      <div class="van-uploader__preview-masker"></div>
                      <video-player
                        class="video-player vjs-custom-skin"
                        :playsinline="true"
                        :options="{
                          aspectRatio: '16:16',
                          preload: 'auto',
                          sources: [
                            {
                              src: file.url
                            }
                          ]
                        }"
                      ></video-player>
                    </template>
                  </template>
                </van-uploader>
              </template>
            </van-field>
          </template>
        </template>
        <!-- 延时申请 -->
        <template v-if="delayApplyData[0]">
          <van-cell title="延时申请" class="van-cell__border_top" />
          <van-cell
            title="申请时间"
            :value="delayApplyData[0].visitTime"
            title-class="van-cell__title_gray"
            value-class="van-cell__value_black"
          />
          <van-cell title="申请原因" title-class="van-cell__title_gray" :border="false" />
          <van-field
            readonly
            v-model="delayApplyData[0].visitRecord"
            rows="5"
            autosize
            type="textarea"
            :border="false"
            class="van-field__value--textarea-lightgray"
          />
        </template>
        <template v-if="delayApplyResultData.length">
          <van-cell
            title="延时审批"
            :value="delayApplyResultData[delayApplyResultData.length - 1].visitRecord"
            title-class="van-cell__title_gray"
            value-class="van-cell__value_black"
          />
        </template>
        <!-- 事件督办 -->
        <template v-if="superviseRecordData[superviseRecordIndex]">
          <van-cell title="督办回复" class="van-cell__border_top" />
          <van-cell title="督办意见" title-class="van-cell__title_gray" :border="false" />
          <van-field
            readonly
            v-model="superviseRecordData[superviseRecordIndex].visitRecord"
            rows="5"
            autosize
            type="textarea"
            :border="false"
            class="van-field__value--textarea-lightgray"
          />
          <van-cell
            title="答复天数"
            :value="superviseData.superviseReplyDate + '天'"
            title-class="van-cell__title_gray"
            value-class="van-cell__value_black"
          />
          <van-cell
            title="剩余回复时长"
            :value="superviseData.surplusTime"
            title-class="van-cell__title_gray"
            value-class="van-cell__value_black"
            v-if="!superviseReplyData[superviseReplyIndex]"
          />
        </template>
        <!-- 督办回复 -->
        <template v-if="superviseReplyData[superviseReplyIndex]">
          <van-cell title="回复内容" title-class="van-cell__title_gray" :border="false" />
          <van-field
            readonly
            v-model="superviseReplyData[superviseReplyIndex].visitRecord"
            rows="5"
            autosize
            type="textarea"
            :border="false"
            class="van-field__value--textarea-lightgray"
          />
          <van-cell
            title="回复时长"
            :value="superviseData.surplusTime"
            title-class="van-cell__title_gray"
            value-class="van-cell__value_black"
          />
        </template>
        <div style="margin: 60px 16px">
          <template v-if="eventData.dealPerson === this.user.gridPersonCode">
            <!-- 已督办 -->
            <template v-if="eventData.isSupervising === '1'">
              <van-button
                block
                type="info"
                :disabled="buttonDisabled"
                @click="$router.push(`/event/reply?eventCode=${eventData.eventCode}`)"
              >
                回复
              </van-button>
            </template>
            <template v-else>
              <!-- 处置中可申请延时 -->
              <template v-if="eventData.eventStatus === '3' && eventData.isEnableDelay === '1'">
                <van-row :gutter="23">
                  <van-col span="8" v-if="eventData.isDisposal !== '1'">
                    <van-button block @click="$router.push(`/event/deal?type=3&eventCode=${eventData.eventCode}`)">
                      退回
                    </van-button>
                  </van-col>
                  <van-col span="8" v-if="eventData.isDisposal !== '1'">
                    <van-button
                      block
                      type="danger"
                      :disabled="buttonDisabled"
                      @click="
                        $router.push({
                          path: '/event/delay',
                          query: {
                            eventCode: eventData.eventCode,
                            deptCode: eventData.departmentCode,
                            overTime: eventData.overTime
                          }
                        })
                      "
                    >
                      延时申请
                    </van-button>
                  </van-col>
                  <van-col span="8" v-if="eventData.isDisposal !== '1'">
                    <van-button
                      block
                      type="info"
                      @click="$router.push(`/event/deal?type=8&eventCode=${eventData.eventCode}`)"
                    >
                      已处置
                    </van-button>
                  </van-col>
                  <van-col span="12" v-if="eventData.isDisposal === '1'">
                    <van-button
                      block
                      type="danger"
                      :disabled="buttonDisabled"
                      @click="
                        $router.push({
                          path: '/event/delay',
                          query: {
                            eventCode: eventData.eventCode,
                            deptCode: eventData.departmentCode,
                            overTime: eventData.overTime
                          }
                        })
                      "
                    >
                      延时申请
                    </van-button>
                  </van-col>
                  <van-col span="12" v-if="eventData.isDisposal === '1'">
                    <van-button
                      block
                      type="info"
                      @click="$router.push(`/event/deal?type=8&eventCode=${eventData.eventCode}`)"
                    >
                      已处置
                    </van-button>
                  </van-col>
                </van-row>
              </template>
              <!-- 处置中 -->
              <template v-if="eventData.eventStatus === '3' && eventData.isEnableDelay === '0'">
                <van-row :gutter="23">
                  <van-col span="12" v-if="eventData.isDisposal !== '1'">
                    <van-button block @click="$router.push(`/event/deal?type=3&eventCode=${eventData.eventCode}`)">
                      退回
                    </van-button>
                  </van-col>
                  <van-col span="12" v-if="eventData.isDisposal !== '1'">
                    <van-button
                      block
                      type="info"
                      @click="$router.push(`/event/deal?type=8&eventCode=${eventData.eventCode}`)"
                    >
                      已处置
                    </van-button>
                  </van-col>
                  <van-col span="24" v-if="eventData.isDisposal === '1'">
                    <van-button
                      block
                      type="info"
                      @click="$router.push(`/event/deal?type=8&eventCode=${eventData.eventCode}`)"
                    >
                      已处置
                    </van-button>
                  </van-col>
                </van-row>
              </template>
              <!-- 待处置 -->
              <template v-if="eventData.eventStatus === '7'">
                <van-row :gutter="23">
                  <van-col span="12" v-if="eventData.isDisposal !== '1'">
                    <van-button block @click="$router.push(`/event/deal?type=3&eventCode=${eventData.eventCode}`)">
                      退回
                    </van-button>
                  </van-col>
                  <van-col span="12" v-if="eventData.isDisposal !== '1'">
                    <van-button block type="info" :disabled="buttonDisabled" @click="startDisposalClick">
                      开始处置
                    </van-button>
                  </van-col>
                  <van-col span="24" v-if="eventData.isDisposal === '1'">
                    <van-button block type="info" :disabled="buttonDisabled" @click="startDisposalClick">
                      开始处置
                    </van-button>
                  </van-col>
                </van-row>
              </template>
              <!-- 开始处置 -->
              <template v-if="eventData.eventStatus === '8'">
                <van-button block type="info" :disabled="buttonDisabled" @click="arriveClick">已到达</van-button>
              </template>
            </template>
          </template>
        </div>
      </van-sticky>
    </div>
    <!-- 视频预览 -->
    <gb-video :url="videoUrl" :show.sync="videoPopupShow"></gb-video>
    <van-uploader
      ref="arriveUpload"
      name="arriveFileList"
      v-model="arriveFileList"
      :max-size="maxSize"
      :before-read="uploadBeforeRead"
      :after-read="uploadAfterRead"
      style="display: none"
      accept="image/*"
      capture="camera"
    />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import Event from '@/api/event'
import Upload from '@/mixins/upload'
export default {
  mixins: [Upload],
  data() {
    return {
      // 上传配置
      folder: 'event',
      maxSize: 10 * 1024 * 1024,
      // 已到达
      arriveFileList: [],
      // 处置结果
      resultData: {},
      resultActiveNames: [],
      // 详情
      eventData: {},
      fileList: [],
      // 详情 - 九张图片key
      uploadKeys: [
        'firstImageUrl',
        'secondImageUrl',
        'thirdImageUrl',
        'fourthImageUrl',
        'fifthImageUrl',
        'sixthImageUrl',
        'seventhImageUrl',
        'eighthImageUrl',
        'ninthImageUrl'
      ],
      // 督办详情
      superviseData: {},
      superviseRecordData: [],
      superviseReplyData: [],
      superviseRecordIndex: 0,
      superviseReplyIndex: 0,
      // 申请详情
      delayApplyData: [],
      delayApplyResultData: [],
      // 文件后缀
      accept: ['jpg', 'jpeg', 'png', 'mp4', 'avi', 'mov'],
      // 视频后缀
      format: ['mp4', 'avi', 'mov'],
      // 视频弹窗
      videoPopupShow: false,
      videoUrl: '',
      // 禁止多次点击
      buttonDisabled: false,
      // 处置/退回参数
      statusParams: {
        eventCode: '',
        eventOrigin: '',
        nextPerson: '',
        assignee: '',
        acceptance: '',
        comment: ''
      }
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  created() {
    this.statusParams.nextPerson = this.user.gridPersonCode
    this.statusParams.assignee = this.user.gridPersonCode
    this.statusParams.acceptance = '2'
    this.getDetail()
    this.getSuperviseDetail()
    this.getOverTimeDetail()
    this.getResultDetail()
  },
  methods: {
    // 事件详情
    getDetail() {
      Event.Manage.detail({
        eventCode: this.$route.query.eventCode
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.eventData = { ...data }
          this.statusParams.eventCode = this.eventData.eventCode
          this.statusParams.eventOrigin = this.eventData.eventOrigin
          this.fileList = []
          for (let i = 0; i < this.uploadKeys.length; i++) {
            if (this.eventData[this.uploadKeys[i]]) {
              this.fileList.push({
                url: this.$config.ImageURl + this.eventData[this.uploadKeys[i]]
              })
            }
          }
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    // 督办详情
    getSuperviseDetail() {
      Event.Manage.superviseDetail({
        eventCode: this.$route.query.eventCode
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.superviseData = data
          if (!data.detail || !data.detail.length) return false
          const dataDetail = data.detail
          for (let i = 0; i < dataDetail.length; i++) {
            if (dataDetail[i].visitRecord === '事件督办') {
              this.superviseRecordData.push(dataDetail[i + 1])
            }
            if (dataDetail[i].visitRecord === '督办回复') {
              this.superviseReplyData.push(dataDetail[i + 1])
            }
          }
          if (this.superviseRecordData.length === this.superviseReplyData.length) {
            this.superviseRecordIndex = this.superviseRecordData.length - 1
            this.superviseReplyIndex = this.superviseReplyData.length - 1
          } else {
            this.superviseRecordIndex = this.superviseRecordData.length - 1
            this.superviseReplyIndex = -1
          }
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    // 延时申请详情
    getOverTimeDetail() {
      Event.Manage.overTimeDetail({
        eventCode: this.$route.query.eventCode
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          if (!data.detail || !data.detail.length) return false
          const dataDetail = data.detail
          for (let i = 0; i < dataDetail.length; i++) {
            if (dataDetail[i].visitRecord === '延时申请' && dataDetail[i + 1].commentLevel === '2') {
              this.delayApplyData.push(dataDetail[i + 1])
            }
            if (
              dataDetail[i].visitRecord.indexOf('同意延时申请') !== -1 ||
              dataDetail[i].visitRecord.indexOf('驳回延时申请') !== -1
            ) {
              this.delayApplyResultData.push(dataDetail[i])
            }
          }
        }
      })
    },
    // 处置结果详情
    getResultDetail() {
      Event.Manage.resultDetail({
        eventCode: this.$route.query.eventCode,
        appCode: this.user.gridPersonCode
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          for (const key in data) {
            if (data[key].comment && data[key].comment[2]) {
              const imgs = data[key].comment[2].visitRecord.split('&&&')
              data[key].fileList = imgs.map(o => {
                return { url: this.$config.ImageURl + o }
              })
            }
          }
          this.resultData = data
        }
      })
    },
    // 视频预览
    previewClick({ file }, detail) {
      const urlArr = this.fileList[detail.index].url.split('.')
      const suffix = urlArr[urlArr.length - 1]
      if (this.format.includes(suffix)) {
        this.videoPopupShow = true
        this.videoUrl = this.fileList[detail.index].url
      }
    },
    // 上次处置结果图片视频预览
    resultLastPreviewClick({ file }, detail) {
      const urlArr = this.resultData.lastTime.fileList[detail.index].url.split('.')
      const suffix = urlArr[urlArr.length - 1]
      if (this.format.includes(suffix)) {
        this.videoPopupShow = true
        this.videoUrl = this.resultData.lastTime.fileList[detail.index].url
      }
    },
    // 处置结果图片视频预览
    resultPreviewClick({ file }, detail) {
      const urlArr = this.resultData.thisTime.fileList[detail.index].url.split('.')
      const suffix = urlArr[urlArr.length - 1]
      if (this.format.includes(suffix)) {
        this.videoPopupShow = true
        this.videoUrl = this.resultData.thisTime.fileList[detail.index].url
      }
    },
    // 开始处置
    startDisposalClick() {
      this.$dialog
        .confirm({
          title: '提示',
          message: '确认开始处置该事件？',
          confirmButtonText: '是',
          cancelButtonText: '否'
        })
        .then(() => {
          this.statusChange()
        })
    },
    // 状态更改
    statusChange() {
      this.buttonDisabled = true
      Event.Manage.updateStatus(this.statusParams)
        .then(res => {
          this.buttonDisabled = false
          const { status } = res.data
          if (status === 0) {
            this.$toast.success('操作成功')
            this.getDetail()
          } else {
            this.$toast.fail(res.data.message)
          }
        })
        .catch(() => {
          this.buttonDisabled = false
        })
    },
    // 已到达
    arriveClick() {
      this.$dialog
        .alert({
          title: '下一步',
          message: '请拍摄现场照片'
        })
        .then(() => {
          this.$refs.arriveUpload.chooseFile()
        })
    },
    uploadAfter(detail) {
      if (detail.name === 'arriveFileList') {
        this.statusParams.comment = this.arriveFileList[this.arriveFileList.length - 1].url
        this.statusChange()
      }
    }
  }
}
</script>
<style lang="less" scope>
@import '~@/assets/style/event/detail';
</style>
